@import './index';

// ================================================================
// =                      Children Component                      =
// ================================================================
.@{form-item-prefix-cls} {
  .@{line-style-prefix}-mentions,
  textarea.@{line-style-prefix}-input {
    height: auto;
  }

  // input[type=file]
  .@{line-style-prefix}-upload {
    background: transparent;
  }
  .@{line-style-prefix}-upload.@{line-style-prefix}-upload-drag {
    background: @background-color-light;
  }

  input[type='radio'],
  input[type='checkbox'] {
    width: 14px;
    height: 14px;
  }

  // Radios and checkboxes on same line
  .@{line-style-prefix}-radio-inline,
  .@{line-style-prefix}-checkbox-inline {
    display: inline-block;
    margin-left: 8px;
    font-weight: normal;
    vertical-align: middle;
    cursor: pointer;

    &:first-child {
      margin-left: 0;
    }
  }

  .@{line-style-prefix}-checkbox-vertical,
  .@{line-style-prefix}-radio-vertical {
    display: block;
  }

  .@{line-style-prefix}-checkbox-vertical + .@{line-style-prefix}-checkbox-vertical,
  .@{line-style-prefix}-radio-vertical + .@{line-style-prefix}-radio-vertical {
    margin-left: 0;
  }

  .@{line-style-prefix}-input-number {
    + .@{form-prefix-cls}-text {
      margin-left: 8px;
    }
    &-handler-wrap {
      z-index: 2; // https://github.com/ant-design/ant-design/issues/6289
    }
  }

  .@{line-style-prefix}-select,
  .@{line-style-prefix}-cascader-picker {
    width: 100%;
  }

  // Don't impact select inside input group and calendar header select
  .@{line-style-prefix}-picker-calendar-year-select,
  .@{line-style-prefix}-picker-calendar-month-select,
  .@{line-style-prefix}-input-group .@{line-style-prefix}-select,
  .@{line-style-prefix}-input-group .@{line-style-prefix}-cascader-picker {
    width: auto;
  }
}
